<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>教室列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <div class="list">
        <el-row :gutter="30">
          <el-col :span="2">
            <el-button size="min" type="primary" @click="openAddDialog">新增</el-button>
          </el-col>
          <el-col :span="4">
            <div>
              <el-input
                @keyup.enter.native="searchClassroom"
                clearable
                placeholder="教室名字"
                v-model="searchParam.key"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="content">
              <el-select v-model="searchParam.minSize" placeholder="最小容量">
                <el-option label="30人" value="30"></el-option>
                <el-option label="50人" value="50"></el-option>
                <el-option label="90人" value="90"></el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="content">
              <el-select v-model="searchParam.maxSize" placeholder="最大容量">
                <el-option label="30人" value="30"></el-option>
                <el-option label="50人" value="50"></el-option>
                <el-option label="90人" value="90"></el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="4">
            <el-tooltip content="搜索" placement="top" effect="dark">
              <el-button
                effect="dark"
                clearable
                type="warning"
                icon="el-icon-search"
                circle
                @click="searchClassroom"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="重置" placement="right" effect="dark">
              <el-button
                type="primary"
                plain
                icon="el-icon-refresh-left"
                circle
                @click="resetSearchParam"
              ></el-button>
            </el-tooltip>
          </el-col>

          <el-col :span="6">
            <el-tooltip content="点击刷新" placement="top" effect="dark">
              <el-button
                @click="refreshTable"
                class="refresh"
                type="success"
                icon="el-icon-refresh"
                circle
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>

        <el-table highlight-current-row :data="courseList" stripe border header-align="center">
          >
          <el-table-column
            fixed="left"
            align="center"
            prop="classroomName"
            sortable
            width="150"
            label="教室名"
          >
            <template slot-scope="scope">
              <el-tag effect="dark">{{scope.row.classroomName}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="building" sortable width="140px" label="所在教学楼">
            <template slot-scope="scope">
              <el-tag effect="dark" type="info">{{scope.row.building}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            :filters="[{ text: '小型', value: 0 }, { text: '中型', value: 1 },{ text: '大型', value: 2 }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            resizable
            align="center"
            prop="type"
            label="类型"
            width="130"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type==0">小型教室</el-tag>
              <el-tag type="danger" v-else-if="scope.row.type==1">中型教室</el-tag>
              <el-tag type="success" v-else>大型教室</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="content" sortable align="center" label="教室容量" width="125px"></el-table-column>
          <el-table-column align="center" prop="status" sortable label="是否启用" width="110px">
            <template slot-scope="scope">
              <el-switch
                @change="changeStatus(scope.row)"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="gmtCreate" sortable label="添加时间" width="220">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="230">
            <template slot-scope="scope">
              <el-button
                class="edit"
                size="mini"
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-popconfirm
                @confirm="isconfirm( scope.row)"
                confirm-button-text="我意已决"
                cancel-button-text="点错了"
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除吗"
              >
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 40, 80]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 教室新增 -->

        <div class="dialog-form">
          <el-dialog
            modal
            top="120px"
            width="32%"
            @close="closeDialog"
            title="教室添加"
            :visible="addDialogVisible"
            :before-close="handleClose"
          >
            <el-form
              label-position="left"
              :rules="rules"
              ref="addClassroomRef"
              :model="classroomForm"
              label-width="100px"
            >
              <el-form-item prop="building" label="教学楼名：">
                <el-select
                  class="selectBuilding"
                  clearable
                  v-model="classroomForm.building"
                  placeholder="教学楼"
                >
                  <el-option
                    v-for="item in buildingOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="classroomName" label="教室名：">
                <el-input
                  placeholder="请输入教室名字"
                  clearable
                  v-model="classroomForm.classroomName"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item prop="type" label="班级类型：">
                <el-select
                  class="classroomSelectAdd"
                  v-model="classroomForm.type"
                  placeholder="请选择"
                >
                  <el-option label="小型-30人" value="0"></el-option>
                  <el-option label="中型-50人" value="1"></el-option>
                  <el-option label="大型-90人" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="是否启用：">
                <el-switch v-model="status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                size="medium"
                type="primary"
                @click="addNewClassroom('addClassroomRef')"
              >确 定</el-button>
              <el-button size="medium" @click="addDialogVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>

        <!-- 教室修改 -->
        <div class="dialog-form">
          <el-dialog
            modal
            top="120px"
            width="32%"
            @close="closeDialog"
            title="教室修改"
            :visible="modifiedClassroomDialog"
            :before-close="handleClose"
          >
            <el-form
              label-position="right"
              :rules="rules"
              ref="modifyClassroomRef"
              :model="classroomForm"
              label-width="100px"
            >
              <el-form-item prop="classroomId" label="教室ID">
                <el-input
                  :disabled="true"
                  v-model="classroomForm.classroomId"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="building" label="所在教学楼">
                <el-input
                  :disabled="true"
                  v-model="classroomForm.building"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="classroomName" label="教室名">
                <el-input
                  v-model="classroomForm.classroomName"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item prop="type" label="班级类型">
                <el-select
                  class="classroomSelectModify"
                  v-model="classroomForm.type"
                  placeholder="请选择"
                >
                  <el-option label="小型-30人" value="0"></el-option>
                  <el-option label="中型-50人" value="1"></el-option>
                  <el-option label="大型-90人" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                size="medium"
                type="primary"
                @click="modifyClassroom('modifyClassroomRef')"
              >确 定</el-button>
              <el-button size="medium" @click="modifiedClassroomDialog = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "ManagerList",
  data() {
    return {
      courseList: [], //总记录数
      currentPage: 1, //当前页
      limit: 5, //每页显示多少条
      total: 100, //总条数
      searchParam: {
        key: "",
        minSize: "",
        maxSize: ""
      },
      addDialogVisible: false,
      modifiedClassroomDialog: false,
      rules: {
        building: [
          { required: true, message: "教学楼名不能为空", trigger: "blur" }
        ],
        classroomName: [
          { required: true, message: "教室名不能为空", trigger: "blur" }
        ],
        type: [{ required: true, message: "教室类型不能为空", trigger: "blur" }]
      },
      classroomForm: {},
      status: true,
      buildingOptions: [
        {
          value: "A",
          label: "教学楼A"
        },
        {
          value: "B",
          label: "教学楼B"
        },
        {
          value: "C",
          label: "教学楼C"
        },
        {
          value: "D",
          label: "教学楼D"
        }
      ]
    };
  },
  watch: {
    status(newVal, oldVal) {
      // console.log(newVal + ":" + oldVal);
    }
  },
  methods: {
    filterTag(value, row) {
      return row.type === value.toString();
    },
    getCourseList() {
      this.$http
        .get("/classroom/noAuthorize/getClassroomListByCondition", {
          params: {
            page: this.currentPage,
            limit: this.limit,
            searchParam: this.searchParam.key,
            minSize: this.searchParam.minSize,
            maxSize: this.searchParam.maxSize
          }
        })
        .then(resp => {
          let { code } = resp.data;
          let { pageResult } = resp.data.data;

          if (code === 1) {
            this.courseList = pageResult.list;
            this.currentPage = pageResult.currPage;
            this.limit = pageResult.pageSize;
            this.total = pageResult.totalCount;
          }
          return this.$message.error(msg);
        })
        .catch(resp => {});
    },
    refreshTable() {
      this.reload();
      this.$message.success("已刷新");
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getCourseList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCourseList();
    },
    searchClassroom() {
      this.getCourseList();
    },
    resetSearchParam() {
      this.searchParam = {};
    },
    handleEdit(index, row) {
      this.$http
        .get("/classroom/noAuthorize/getClassroom/" + row.classroomId)
        .then(resp => {
          let { code, msg } = resp.data;
          let { classroom } = resp.data.data;
          if (code === 1) {
            this.classroomForm = classroom;
          } else {
            this.$message.warning(msg);
          }
        })
        .catch(resp => {});

      this.modifiedClassroomDialog = true;
    },
    closeDialog() {
      this.getCourseList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(resp => {
          this.getCourseList();
          this.addDialogVisible = false;
          this.modifiedClassroomDialog = false;
          done();
        })
        .catch(resp => {
          this.getCourseList();
        });
    },
    openAddDialog() {
      this.classroomForm = {};
      this.addDialogVisible = true;
    },
    addNewClassroom(addClassroomRef) {
      this.$refs.addClassroomRef.validate(valid => {
        if (valid) {
          let urlSerachParam = new URLSearchParams();
          urlSerachParam.append(
            "classroomName",
            this.classroomForm.classroomName
          );
          urlSerachParam.append("building", this.classroomForm.building);
          urlSerachParam.append("type", this.classroomForm.type);
          urlSerachParam.append("status", this.status);
          this.$http
            .post("/classroom/addClassroom", urlSerachParam)
            .then(resp => {
              let { code, msg } = resp.data;
              if (code === 1) {
                this.$message.success(msg);
              } else {
                this.$message.warning(msg);
              }
              this.getCourseList();
              this.addDialogVisible = false;
            })
            .catch(resp => {});
        }
      });
    },
    modifyClassroom(modifyClassroomRef) {
      this.$refs.modifyClassroomRef.validate(valid => {
        let urlSerachParam = new URLSearchParams();
        urlSerachParam.append(
          "classroomName",
          this.classroomForm.classroomName
        );
        urlSerachParam.append("type", this.classroomForm.type);
        let id = this.classroomForm.classroomId;
        this.$http
          .put("/classroom/modifiedClassroom/" + id, urlSerachParam)
          .then(resp => {
            let { code, msg } = resp.data;
            if (code === 1) {
              this.$message.success(msg);
            } else {
              this.$message.warning(msg);
            }
            this.getCourseList();
            this.modifiedClassroomDialog = false;
          })
          .catch(resp => {});
      });
    },
    isconfirm(row) {
      this.$http
        .delete("/classroom/deleteByClassroomId/" + row.classroomId)
        .then(resp => {
          let code = resp.data.code;
          if (code === 1) {
            this.$message({
              showClose: true,
              message: "删除成功！",
              type: "success"
            });
            this.getCourseList();
          } else {
            return this.$message({
              showClose: true,
              message: resp.data.msg,
              type: "warning"
            });
          }
        })
        .catch(resp => {
          console.log(resp);
        });
    },
    changeStatus(row) {
      let params = new URLSearchParams();
      params.append("status", row.status);
      params.append("classroomId", row.classroomId);
      this.$http
        .put("/classroom/modifiedClassroomStatus", params)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code === 1) {
            return this.$message.success(msg);
          }
          return this.$message.error(msg);
        })
        .catch(resp => {
          console.log(resp);
        });
    }
  },
  created() {
    this.getCourseList();
  }
};
</script>

<style scoped>
.el-input {
  width: 158px;
  margin-right: 10px;
}

.el-row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.refresh {
  float: right;
  margin-right: 20px;
}
.el-pagination {
  margin-top: 10px;
}
.form-input {
  width: 200px;
}

.el-card {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-top: 10px;
}

.edit {
  margin: center;
}
.classroomSelectAdd,
.classroomSelectModify {
  width: 200px;
}
.selectBuilding {
  width: 200px;
}
.list {
  margin-top: 25px;
  margin-left: 20px;
}
</style>